<template>
  <div class="box">
    <header>
      <van-nav-bar
        :title="item.title"
        right-text="●●●"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <main>           
     <div class="main">
       <p class="title">
        <span>
          {{ item.title }}
        </span>
      </p>
      <p class="department">
        <span>
          {{ item.department }}
        </span>
      </p>
      <p class="word">
        <span>
          {{ item.content[0].word }}
        </span>
      </p>
      <img src="https://img2.baidu.com/it/u=1887349954,3657204094&fm=253&fmt=auto&app=120&f=JPEG?w=1208&h=800" class="avatar" alt="">
     </div>
    </main>
    <footer>
      <!-- 评论框 -->
      <input
        type="text"
        v-model="inputVal"
        placeholder="说两句..."
        class="pl"
        @keyup.enter.native="pingl"
      />
      <!-- 收藏按钮 -->
      <div @click="star" >
        <van-icon color="#a0a0a0" name="star" />
        <p>收藏</p>
      </div>
      <div @click="like">
        <van-icon color="#a0a0a0" name="like" />
        <p>{{item.like}}</p>
      </div>
      <div @click="share">
        <van-icon color="#a0a0a0" name="share-o" />
        <p>分享</p>
      </div>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push('/home')
  
}
const inputVal = ref("");
const pingl = () => {
  console.log(inputVal.value);
  inputVal.value = "";
};

// 获取路由详情数据
const route = useRoute();
const item = ref(JSON.parse(decodeURIComponent(route.query.item)));
console.log(item.value);
let starlist = ref([])
const star = () =>{
  starlist.value.push(item.value)
  localStorage.setItem('star',JSON.stringify(starlist.value))
  
}
</script>
<style>
.box {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 90px;
}
main {
  flex: 1;
  background: #ffffff;
  border-bottom: #efefef solid 1px;
}
footer {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  background: white;
}
footer p {
  font-size: 20px;
  color: #a0a0a0;
}
main {
  flex: 1;
}
.main{
  margin-left: 20px;
}
.pl {
  width: 534px;
  height: 60px;
  border: none;
  background-color: #f6f6f6;
  border-radius: 1.25rem;
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
  white-space: normal; /* 允许文本换行 */
  margin-left: 20px;
}
.title{
  font-size: 40px;
  font-weight: 500;
  margin: 20px 0 20px 0;
}
.department{
font-size: 25px;
font-weight: 400;
padding-top: 20px;
padding-bottom: 20px;
}
.word{
  font-size: 30px;
}
.word span{
  line-height: 60px;
}
.avatar{
  width: 700px;
  height: 300px;
  margin-top: 20px;
  border-radius: 20px;
}
</style>
